<template>
  <div>
    <span>{{ author }}</span>
    <button @click="book.author = book.author + '1'">change</button>
    <span>{{ original }}</span>
    <button @click="original.count++">change original</button>
    <span>{{ copy }}</span>
    <button @click="copy.count++">change copy</button>
  </div>
</template>

<script>
import { reactive, ref, toRefs, readonly } from "vue";
export default {
  setup() {
    const book = reactive({
      author: "Vue Team",
      year: "2020",
      title: "Vue 3 Guide",
      description: "You are reading this book right now ;)",
      price: "free",
    });

    let { author } = toRefs(book);
    // let { author } = book;

    const original = reactive({ count: 0 });

    const copy = readonly(original);

    original.count++;

    // 转换copy 将导失败并导致警告
    copy.count++; // 警告: "Set operation on key 'count' failed: target is readonly."
    return {
      author,
      book,
      original,
      copy,
    };
  },
};
</script>

<style>
</style>